webui开发环境性能优化

背景

webui在开发中，首次代理环境、刷新时，都要消耗很多时间，影响开发效率，急需优化

优化方向

vite

升级

项目是使用vite做本地开发环境，现在vite5已经发布了，这里先做一个升级

vite 5.3.1
@vitejs/plugin-basic-ssl 1.1.0
@vitejs/plugin-vue 5.0.5
@vitejs/plugin-vue-jsx 4.0.0

将以上插件升级到最新版本

预加载

按照说明，将每次都会使用到的文件做预加载

warmup: {
  clientFiles: [
    './WLAN/js/override/*.js',
    './WLAN/js/components/*.js',
    './WLAN/js/components/*/*.js',
  ],
},

效果

优化前

首次加载：5.6min

刷新：12.17s

打包：2min 11s

优化后

首次加载：2min

刷新：12.16s

打包：2min

可以看到首次加载速度快了3.6min，打包快了11s，刷新基本不变。

添加证书

由于开启了https但是证书不受信任，所以在浏览器端没能走缓存，这里可以添加一个自签名证书。

将提供的rootCA.crt根证书安装到受信任的根证书颁发机构：

放在了webui的build/ca/rootCA.crt

在vite配置中使用根据ip生成的证书：

https: {
  key: fs.readFileSync(join(__dirname, './build/ca/localhost+256-key.pem')),
  cert: fs.readFileSync(join(__dirname, './build/ca/localhost+256.pem')),
},

该证书已经添加了我们部门网段的所有ip

去除之前的@vitejs/plugin-basic-ssl

注：参考文章https://blog.dteam.top/posts/2019-04/%E6%9C%AC%E5%9C%B0https%E5%BF%AB%E9%80%9F%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88mkcert.html

如果以上没有用，可以自行生成证书

效果

优化前

刷新：12.16s

优化后

刷新：9.82s

总结

汇总一下优化效果：

优化前

首次加载：5.6min

刷新：12.17s

打包：2min 11s

优化后

首次加载：2min

刷新：9.82s

打包：2min

按每天5次重新加载、50次刷新来算，

大致可节省20min每天